<template>

	<view class="header1">
		<uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @blur="blur" @focus="focus" @input="input"
			@clear="clear">
		</uni-search-bar>
		<uni-icons custom-prefix="iconfont" type="icon-shoujitianchong" size="30"></uni-icons>
	</view>
	<view class="header2">
		<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			:duration="duration">
			<swiper-item>
				<image class="img1" src="../images/2-1.png" mode=""></image>
			</swiper-item>
			<swiper-item>
				<img class="img1" src="../images/2.png" alt="">
			</swiper-item>
			<swiper-item>
				<img class="img1" src="../images/2.png" alt="">
			</swiper-item>
		</swiper>
	</view>
	<view class="bd1">
		<button class="btn1" @click="ccc">
			<uni-icons custom-prefix="iconfont" type="icon-nvbao" size="30"></uni-icons>衍生品市场
		</button>
		<button class="btn1" @click="ccc1">
			<uni-icons custom-prefix="iconfont" type="icon-banquan-kuai" size="30"></uni-icons>版权市场
		</button>

	</view>
		<view class="uni-padding-wrap uni-common-mt">
						<uni-segmented-control :current="current" :values="items" :style-type="styleType"
							:active-color="activeColor" @clickItem="onClickItem" />
					</view>
					<view class="content">
						<view v-if="current === 1">
							
							<uni-card class="unicard1" v-for="v1 in tabs_data">
								<view class="un1">
								<view class="xx-hd1">
										<img class="xx-img1" src="../images/2.png" alt="">
										<view class="xinxi1">
											<text>{{v1.message}}</text>
											<text>heming</text>
										</view>
										<button class="guanzhu1">+关注</button>
										
									</view>
								<img src="../images/2.png" alt="">
								<view class="wenben1">
									<text>nihao</text>
									<text>ninini</text>
								</view>
								</view>
							</uni-card>
						</view>
						<view v-if="current === 0">
							<view class="diyige">
							<view class="toubu">
								<uni-icons custom-prefix="iconfont" type="icon-icon-test" size="30"></uni-icons>
								<text>新潮国风</text>
								<text class="chakan">查看更多</text>
							</view>
							<uni-card class="unicard1">
								<img src="../images/2.png" alt="">
								<view class="name1">name</view>
								<view class="btm">
									<text>111</text>
										<img class="xx-img2" src="../images/2.png" alt="">
										<text>name1</text>
								</view>
							<view class="btm2">
								<text>jiage</text>
								<button class="button1">已售</button>
							</view>
							</uni-card>
							</view>
						</view>
					</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs_data:[
					{message:1},
					{message:2}
				],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				buttonGroup: "",
				// 当前样式
				target: 0,
				// 当前item位置
				thisindex: 0,
				// 选项卡
				items: ['精选市场', '人气艺术家', ],
				styles: [{
						value: 'button',
						text: '按钮',
						checked: true
					},
					{
						value: 'text',
						text: '文字'
					}
				],
				colors: ['#007aff', '#4cd964', '#dd524d'],
				current: 0,
				colorIndex: 0,
				activeColor: '#007aff',
				styleType: 'button'
			}
		},
		methods: {


			toggle(e) {
				let index = e.detail.current
				this.target = index
			},
			// 点击nav控制下面的展示
			setIndex(e) {
				let index = e.currentTarget.dataset.index
				this.thisindex = index
			},
			search(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
			},
			input(res) {
				console.log('----input:', res)
			},
			clear(res) {
				uni.showToast({
					title: 'clear事件，清除值为：' + res.value,
					icon: 'none'
				})
			},
			blur(res) {
				uni.showToast({
					title: 'blur事件，输入值为：' + res.value,
					icon: 'none'
				})
			},
			focus(e) {
				uni.showToast({
					title: 'focus事件，输出值为：' + e.value,
					icon: 'none'
				})
			},
			ccc(){
				uni.switchTab({
					url: '/pages/artist/artist'
				});
			},
			ccc1(){
				uni.switchTab({
					url: '/pages/artist/artist'
				});
			},
			cancel(res) {
				uni.showToast({
					title: '点击取消，输入值为：' + res.value,
					icon: 'none'
				})
			},
			// 选项卡
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			styleChange(e) {
				if (this.styleType !== e.detail.value) {
					this.styleType = e.detail.value
				}
			},
			colorChange(e) {
				if (this.styleType !== e.detail.value) {
					console.log(e.detail.value);
					this.activeColor = e.detail.value
				}
			}
		}
	}
</script>

<style lang="scss">
	@import url('@/pages/iconfont/sytb/iconfont.css');
	//选项卡样式
	.content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		height: 700px;
		}
		.toubu{
			
			width: 690rpx;
			height: 50rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 30rpx;
			border-bottom: 1px solid rgb(244,244,245);
			.chakan{
				font-size: 14px;
				color: rgb(199,199,199);
				margin-left: 350rpx;
			}
		}
		.diyige{
			margin-top: 30rpx;
		}
	.uni-card{
		width: 670rpx;
		spacing	: 0;
		height: 800rpx;
		display: flex;
		justify-content: center;
		.name1{
			margin-top: 30rpx;
		}
		.xx-img2{
			width: 50rpx;
			height: 50rpx;
			border-radius: 45px 45px 45px 45px;
			margin-left: 430rpx;
		}
		.btm{
			display: flex;
			align-items: center;
			margin-top: 30rpx;
		}
		.btm2{
			display: flex;
			align-items: center;
			margin-top: 10rpx;
			margin-top: 30rpx;
			.button1{
				width:100rpx;
				height: 50rpx;
				text-align: center;
				font-size: 20rpx;
				background-color: rgb(215,215,215);
				margin-left: 440rpx;
				color: white;
			}
		}
		
	}
	.hd0{
		width: 650rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 20rpx;
		.chakan{
			font-size: 14px;
			color: rgb(199,199,199);
			margin-left: 350rpx;
		}
	}
	.un1{
		width: 650rpx;
		height: 500rpx;
		justify-content: center;
	}
	.wenben1{
		width: 750rpx;
		height: 100rpx;
	}
	.xx-img1{
		width: 100rpx;
		height: 100rpx;
		border-radius: 45px 45px 45px 45px;
		margin-left: 50rpx;
	}
	.xx-hd1{
		width: 650rpx;
		height: 200rpx;
		margin: auto;
		display: flex;
		background-color: rgb(242,242,242);
		align-items: center;
		.guanzhu1{
			width: 140rpx;
			height: 60rpx;
			margin-left: 100rpx;
			color: white;
			background-color: red;
			border-radius: 8px 8px 8px 8px;
		text-align: center;
			font-size: 12px;
		}
		.xinxi1{
			flex-wrap: wrap;
					}
	}
	

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 0;
	}

	.uni-common-mt {
		margin-top: 30px;
	}

	.uni-padding-wrap {
		// width: 750rpx;
		padding: 0px 30px;
	}
	.color-tag {
		width: 25px;
		height: 25px;
	}

	.uni-list {
		flex: 1;
	}

	.uni-list-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex: 1;
		flex-direction: row;
		background-color: #FFFFFF;
	}


	.uni-list-item__container {
		padding: 12px 15px;
		width: 100%;
		flex: 1;
		position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		box-sizing: border-box;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom-style: solid;
		border-bottom-width: 1px;
		border-bottom-color: #eee;
	}

	.uni-list-item__content-title {
		font-size: 14px;
	}

	.search-result {
		padding-top: 10px;
		padding-bottom: 20px;
		text-align: center;
	}

	.search-result-text {
		text-align: center;
		font-size: 14px;
		color: #666;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 0px;
	}

	.uni-mt-10 {
		margin-top: 10px;
	}

	body {
		background-color: rgb(250, 250, 250);
	}

	.header1 {
		display: flex;
		align-items: center;
		justify-content: center;

		uni-search-bar {
			width: 650rpx;
		}
	}

	.img1 {
		width: 100%;
	}

	.i1 {
		color: red;
	}

	.bd1 {
		display: flex;
		align-items: center;
		margin-top: 20px;

		.btn1 {
			display: flex;
			align-items: center;
			height: 100rpx;
		}

		.uni-icons {
			color: red;
		}
	}

	.header2 {
		display: flex;
		justify-content: center;
		height: 750rpx;
		border-radius: 10px 10px 10px 10px;

		.swiper {
			width: 90%;
			height: 100%;

			.img1 {
				width: 100%;
				height: 95%;
			}
		}
	}

	.xcgf {
		display: flex;
		width: 90%;
		height: 100rpx;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid rgb(242, 242, 242);
	}

	.xcgf-item {
		width: 90%;
		height: 900rpx;
		background-color: red;
	}
</style>
